<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">   
    <title>evanyou 效果-彩带的实现</title>
    <style type="text/css">
       *{
        padding: 0;
        margin: 0;
       }
       html,body{
        width: 100%;
        overflow-x:hidden; 
       }
        xmp {
            font-size: 15px;
            line-height: 22px;
            padding: 0;
            color: #000;
            white-space: pre;
            word-wrap: normal;
            background-color: #f6f8fa;
        }
        p{
            width: 100%;
            height: 20px;
        }
    </style>
</head>

<body>
    <canvas id="evanyou" width="1920" height="934"></canvas>
    <section data-mpa-preserve-tpl-color="t" data-mpa-template="t" class="" mpa-preserve="t" style=" font-size: 20px;"><pre style="margin:0;padding:0;border-radius:none;background:none;"><code style="border-radius: 4px;font-size: 0.85em;margin: 0px 0.15em;background: rgb(40, 44, 52);color: rgb(171, 178, 191);display: block;padding: 6px;overflow-x: auto;white-space: nowrap;" class=""><span class="" style="color: rgb(92, 99, 112);background: rgba(0, 0, 0, 0);display: inline;width: 83px;text-decoration: none solid rgb(92, 99, 112);font-weight: 400;font-style: italic;">/*Html代码:*/</span><br> &lt;canvas id=<span class="" style="color: rgb(152, 195, 121);background: rgba(0, 0, 0, 0);display: inline;width: 59px;text-decoration: none solid rgb(152, 195, 121);font-weight: 400;font-style: normal;">"evanyou"</span> width=<span class="" style="color: rgb(152, 195, 121);background: rgba(0, 0, 0, 0);display: inline;width: 39px;text-decoration: none solid rgb(152, 195, 121);font-weight: 400;font-style: normal;">"1920"</span> height=<span class="" style="color: rgb(152, 195, 121);background: rgba(0, 0, 0, 0);display: inline;width: 33px;text-decoration: none solid rgb(152, 195, 121);font-weight: 400;font-style: normal;">"934"</span>&gt;&lt;/canvas&gt;<br><span class="" style="color: rgb(92, 99, 112);background: rgba(0, 0, 0, 0);display: inline;width: 77px;text-decoration: none solid rgb(92, 99, 112);font-weight: 400;font-style: italic;">/*CSS代码:*/</span><br>&lt;style type=<span class="" style="color: rgb(152, 195, 121);background: rgba(0, 0, 0, 0);display: inline;width: 66px;text-decoration: none solid rgb(152, 195, 121);font-weight: 400;font-style: normal;">"text/css"</span>&gt;<br> &nbsp; &nbsp;<span class="" style="color: rgb(92, 99, 112);background: rgba(0, 0, 0, 0);display: inline;width: 60px;text-decoration: none solid rgb(92, 99, 112);font-weight: 400;font-style: italic;">#evanyou{</span><br> &nbsp; &nbsp; &nbsp; &nbsp;position:fixed;<br> &nbsp; &nbsp; &nbsp; &nbsp;width:<span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 20px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">100</span>%;<br> &nbsp; &nbsp; &nbsp; &nbsp;height:<span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 20px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">100</span>%;<br> &nbsp; &nbsp; &nbsp; &nbsp;left:<span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 6px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">0</span>;<br> &nbsp; &nbsp; &nbsp; &nbsp;top:<span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 7px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">0</span>;<br> &nbsp; &nbsp;}<br>&lt;/style&gt;<br><br><span class="" style="color: rgb(92, 99, 112);background: rgba(0, 0, 0, 0);display: inline;width: 70px;text-decoration: none solid rgb(92, 99, 112);font-weight: 400;font-style: italic;">/*JS代码:*/</span><br> <span class="" style="color: rgb(92, 99, 112);background: rgba(0, 0, 0, 0);display: inline;width: 90px;text-decoration: none solid rgb(92, 99, 112);font-weight: 400;font-style: italic;">// evanyou效果</span><br> &nbsp; &nbsp; &nbsp; &nbsp;<span class="" style="color: rgb(198, 120, 221);background: rgba(0, 0, 0, 0);display: inline;width: 19px;text-decoration: none solid rgb(198, 120, 221);font-weight: 400;font-style: normal;">var</span> c = document.getElementById(<span class="" style="color: rgb(152, 195, 121);background: rgba(0, 0, 0, 0);display: inline;width: 59px;text-decoration: none solid rgb(152, 195, 121);font-weight: 400;font-style: normal;">'evanyou'</span>),<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;x = c.getContext(<span class="" style="color: rgb(152, 195, 121);background: rgba(0, 0, 0, 0);display: inline;width: 27px;text-decoration: none solid rgb(152, 195, 121);font-weight: 400;font-style: normal;">'2d'</span>),<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;pr = window.devicePixelRatio || <span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 7px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">1</span>,<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;w = window.innerWidth,<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;h = window.innerHeight,<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;f = <span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 14px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">90</span>,<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;q,<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;m = Math,<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;r = <span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 7px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">0</span>,<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;u = m.PI * <span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 6px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">2</span>,<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;v = m.cos,<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;z = m.random;<br> &nbsp; &nbsp; &nbsp; &nbsp;c.width = w * pr;<br> &nbsp; &nbsp; &nbsp; &nbsp;c.height = h * pr;<br> &nbsp; &nbsp; &nbsp; &nbsp;x.scale(pr, pr);<br> &nbsp; &nbsp; &nbsp; &nbsp;x.globalAlpha = <span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 20px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">0.6</span>;<br> &nbsp; &nbsp; &nbsp; &nbsp;<span class="" style="color: rgb(171, 178, 191);background: rgba(0, 0, 0, 0);display: inline;width: 125px;text-decoration: none solid rgb(171, 178, 191);font-weight: 400;font-style: normal;"><span class="" style="color: rgb(198, 120, 221);background: rgba(0, 0, 0, 0);display: inline;width: 52px;text-decoration: none solid rgb(198, 120, 221);font-weight: 400;font-style: normal;">function</span> <span class="" style="color: rgb(97, 174, 238);background: rgba(0, 0, 0, 0);display: inline;width: 46px;text-decoration: none solid rgb(97, 174, 238);font-weight: 400;font-style: normal;">evanyou</span><span class="" style="color: rgb(171, 178, 191);background: rgba(0, 0, 0, 0);display: inline;width: 13px;text-decoration: none solid rgb(171, 178, 191);font-weight: 400;font-style: normal;">()</span> </span>{<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;x.clearRect(<span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 7px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">0</span>, <span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 7px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">0</span>, w, h)<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;q = [{ x: <span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 7px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">0</span>, y: h * <span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 13px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">.7</span> + f }, { x: <span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 6px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">0</span>, y: h * <span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 13px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">.7</span> - f }]<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="" style="color: rgb(198, 120, 221);background: rgba(0, 0, 0, 0);display: inline;width: 33px;text-decoration: none solid rgb(198, 120, 221);font-weight: 400;font-style: normal;">while</span> (q[<span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 7px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">1</span>].x &lt; w + f) d(q[<span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 7px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">0</span>], q[<span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 6px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">1</span>])<br> &nbsp; &nbsp; &nbsp; &nbsp;}<br> &nbsp; &nbsp; &nbsp; &nbsp;<span class="" style="color: rgb(171, 178, 191);background: rgba(0, 0, 0, 0);display: inline;width: 112px;text-decoration: none solid rgb(171, 178, 191);font-weight: 400;font-style: normal;"><span class="" style="color: rgb(198, 120, 221);background: rgba(0, 0, 0, 0);display: inline;width: 52px;text-decoration: none solid rgb(198, 120, 221);font-weight: 400;font-style: normal;">function</span> <span class="" style="color: rgb(97, 174, 238);background: rgba(0, 0, 0, 0);display: inline;width: 7px;text-decoration: none solid rgb(97, 174, 238);font-weight: 400;font-style: normal;">d</span><span class="" style="color: rgb(171, 178, 191);background: rgba(0, 0, 0, 0);display: inline;width: 39px;text-decoration: none solid rgb(171, 178, 191);font-weight: 400;font-style: normal;">(i, j)</span> </span>{<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;x.beginPath()<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;x.moveTo(i.x, i.y)<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;x.lineTo(j.x, j.y)<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="" style="color: rgb(198, 120, 221);background: rgba(0, 0, 0, 0);display: inline;width: 20px;text-decoration: none solid rgb(198, 120, 221);font-weight: 400;font-style: normal;">var</span> k = j.x + (z() * <span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 6px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">2</span> - <span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 26px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">0.25</span>) * f,<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;n = y(j.y)<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;x.lineTo(k, n)<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;x.closePath()<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;r -= u / <span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 20px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">-50</span><br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;x.fillStyle = <span class="" style="color: rgb(152, 195, 121);background: rgba(0, 0, 0, 0);display: inline;width: 20px;text-decoration: none solid rgb(152, 195, 121);font-weight: 400;font-style: normal;">'#'</span> + (v(r) * <span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 19px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">127</span> + <span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 20px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">128</span> &lt;&lt; <span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 14px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">16</span> | v(r + u / <span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 7px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">3</span>) * <span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 20px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">127</span> + <span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 20px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">128</span> &lt;&lt; <span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 7px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">8</span> | v(r + u / <span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 7px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">3</span> * <span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 6px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">2</span>) * <span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 20px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">127</span> + <span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 20px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">128</span>).toString(<span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 13px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">16</span>)<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;x.fill()<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;q[<span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 7px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">0</span>] = q[<span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 7px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">1</span>]<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;q[<span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 7px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">1</span>] = { x: k, y: n }<br> &nbsp; &nbsp; &nbsp; &nbsp;}<br> &nbsp; &nbsp; &nbsp; &nbsp;<span class="" style="color: rgb(171, 178, 191);background: rgba(0, 0, 0, 0);display: inline;width: 92px;text-decoration: none solid rgb(171, 178, 191);font-weight: 400;font-style: normal;"><span class="" style="color: rgb(198, 120, 221);background: rgba(0, 0, 0, 0);display: inline;width: 52px;text-decoration: none solid rgb(198, 120, 221);font-weight: 400;font-style: normal;">function</span> <span class="" style="color: rgb(97, 174, 238);background: rgba(0, 0, 0, 0);display: inline;width: 7px;text-decoration: none solid rgb(97, 174, 238);font-weight: 400;font-style: normal;">y</span><span class="" style="color: rgb(171, 178, 191);background: rgba(0, 0, 0, 0);display: inline;width: 19px;text-decoration: none solid rgb(171, 178, 191);font-weight: 400;font-style: normal;">(p)</span> </span>{<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="" style="color: rgb(198, 120, 221);background: rgba(0, 0, 0, 0);display: inline;width: 20px;text-decoration: none solid rgb(198, 120, 221);font-weight: 400;font-style: normal;">var</span> t = p + (z() * <span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 7px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">2</span> - <span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 19px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">1.1</span>) * f<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="" style="color: rgb(198, 120, 221);background: rgba(0, 0, 0, 0);display: inline;width: 40px;text-decoration: none solid rgb(198, 120, 221);font-weight: 400;font-style: normal;">return</span> (t &gt; h || t &lt; <span class="" style="color: rgb(209, 154, 102);background: rgba(0, 0, 0, 0);display: inline;width: 6px;text-decoration: none solid rgb(209, 154, 102);font-weight: 400;font-style: normal;">0</span>) ? y(p) : t<br> &nbsp; &nbsp; &nbsp; &nbsp;}<br> &nbsp; &nbsp; &nbsp; &nbsp;document.onclick = evanyou<br> &nbsp; &nbsp; &nbsp; &nbsp;document.ontouchstart = evanyou<br> &nbsp; &nbsp; &nbsp; &nbsp;evanyou();</code></pre></section>
</body>

</html>
<script>
    //document.getElementById('evanyou').style.width="100%";
    // document.getElementById('evanyou').style.height="100%";
    var c = document.getElementById('evanyou'),
        x = c.getContext('2d'),
        pr = window.devicePixelRatio || 1,
        w = window.innerWidth,
        h = window.innerHeight,
        f = 90,
        q,
        m = Math,
        r = 0,
        u = m.PI * 2,
        v = m.cos,
        z = m.random;
    c.width = w * pr;
    c.height = h * pr;
    x.scale(pr, pr);
    x.globalAlpha = 0.6;

    function evanyou() {
        x.clearRect(0, 0, w, h)
        q = [{
            x: 0,
            y: h * .7 + f
        }, {
            x: 0,
            y: h * .7 - f
        }]
        while (q[1].x < w + f) d(q[0], q[1])
    }

    function d(i, j) {
        x.beginPath()
        x.moveTo(i.x, i.y)
        x.lineTo(j.x, j.y)
        var k = j.x + (z() * 2 - 0.25) * f,
            n = y(j.y)
        x.lineTo(k, n)
        x.closePath()
        r -= u / -50
        x.fillStyle = '#' + (v(r) * 127 + 128 << 16 | v(r + u / 3) * 127 + 128 << 8 | v(r + u / 3 * 2) * 127 + 128).toString(
            16)
        x.fill()
        q[0] = q[1]
        q[1] = {
            x: k,
            y: n
        }
    }

    function y(p) {
        var t = p + (z() * 2 - 1.1) * f
        return (t > h || t < 0) ? y(p) : t
    }
    document.onclick = evanyou
    document.ontouchstart = evanyou
    evanyou();
</script>